<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />   
        <title>Welcome to Design Zone......</title>
        <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css"
			href="../../scripts/ext/resources/css/file-upload.css" />
        <link rel="stylesheet" type="text/css" href="../../styles/dzbase.css" />
        <script type="text/javascript" src="../../scripts/ext/adapter/ext-base.js">
        </script>
        <script type="text/javascript" src="../../scripts/ext/ext-all.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/EditableItem.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/RangeMenu.js">
        </script>
		<script type="text/javascript" src="../../scripts/grid/GridFilters.js">
		</script>
		<script type="text/javascript" src="../../scripts/grid/filter/Filter.js">
		</script>
		<script type="text/javascript"
			src="../../scripts/grid/filter/StringFilter.js">
		</script>
		<script type="text/javascript"
			src="../../scripts/grid/filter/ListFilter.js">
		</script>
		<script type="text/javascript"
			src="../../scripts/grid/filter/DateFilter.js"></script>
		<script type="text/javascript" src="../../scripts/grid/RowExpander.js">
		</script>
		<script type="text/javascript"
	src="../../scripts/form/FileUploadField.js">
        </script>
        <script type="text/javascript" src="../../scripts/i18nMessage.js">
        </script>
        <script type="text/javascript" src="../../scripts/utils.js">
        </script>
        <script type="text/javascript" src="../../scripts/selectMeasureSpecification.js">
        </script>
        <script type="text/javascript">
        	var piMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.productidentification');
        	var msMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.measurespecification');
        	var referenceMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.reference');
        	var fcMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.francecustomer');
			var fMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.factory');
            var message = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=message');
            var ctMsiDescriptionXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtMsiDescription');
            
            var ctMsiDescriptionStore = new Ext.data.Store({
	                  reader: new Ext.data.XmlReader({
	                      record: 'item',
	                      id: 'code',
	                      totalRecords: 'itemTotal'
	                  }, [ 
	                  'code', 'description']),
				data: ctMsiDescriptionXmlLoader.getXml()
	        });
                
            var ctMsiDescriptionCombo = new Ext.form.ComboBox({
					fieldLabel: msMessage.get('ui.measurespecification.itemdesignations'),
					id: 'ctMsiDescription',
					name: 'ctMsiDescription',
                    blankText: message.get('message.edit.noblank'),
				    store: ctMsiDescriptionStore,
					typeAhead: true,
					forceSelection: true,
					valueField: 'code',
				    displayField:'description',
				    triggerAction: 'all',
				    selectOnFocus:true,
					mode: 'local'
				});
			var msItemForm;
			var listStore;
            var listGrid;
			
			var id = getPrarmeterValue(window.location, 'id');
			var msId = getPrarmeterValue(window.location, 'msId');
			
            var startPage = getPrarmeterValue(window.location, 'startPage');
			var input = getPrarmeterValue(window.location, 'input');
			
			var deleteCallback = function(btn){
                if (btn == 'yes') {
                    Ext.Ajax.request({
                        url: '../../servlet/ProductIdentificationServlet?action=15&id=' + deleteId,
                        success: function(o){
                            if (o.responseText == 'success') {
                                listStore.reload();
                                messageTip.msg(message.get('message.tip'), message.get('message.delete.successful'));
                            }
                            else {
                                messageTip.msg(message.get('message.tip'), message.get('message.delete.unsuccessful'));
                            }
                        },
                        failure: function(o){
                            messageTip.msg(message.get('message.tip'), message.get('message.delete.failure'));
                        },
                        params: {
                            foo: 'bar'
                        }
                    });
                }
            }
			
			var editCallback = function(){
				msItemForm.getForm().load({
					url:'../../servlet/ProductIdentificationServlet?action=14&id=' + editId, 
					waitMsg:Ext.LoadMask.prototype.msg, 
					success: function(form, action){
						
					},
					failure: function(o){
						messageTip.msg(message.get('message.tip'), message.get('message.load.unsuccessful'));
					}
				});
			}
			
			var msXMLReader = new Ext.data.XmlReader({
	                record: 'item'
	            }, [{
	                name: 'id',
	                mapping: 'id'
	            }, {
	                name: 'patronage',
	                mapping: 'patronage'
	            }, {
	                name: 'ctStature',
	                mapping: 'ctStature'
	            }, {
	                name: 'ctStatureCode',
	                mapping: 'ctStatureCode'
	            }, {
	                name: 'ctCollarType',
	                mapping: 'ctCollarType'
	            }, {
	                name: 'realPhoto1Name',
	                mapping: 'realPhoto1Name'
	            }, {
	                name: 'realPhoto2Name',
	                mapping: 'realPhoto2Name'
	            }]);
			
			var xmlLoader;
			var msRecord;
			var itemTplMarkup = [
						'<table cellspacing="0" id="the-table" style="width: 100%;"><tbody>',
							'<tr><td style="background:#eeeeee; width: 15%;">',
							message.get('message.list.id'),
							'</td><td>{id}</td>',
							'<td style="background:#eeeeee;width: 15%;">',
							msMessage.get('ui.measurespecification.patronage'),
							'</td><td>{patronage}</td></tr>',
							'<tr><td style="background:#eeeeee;">',
							msMessage.get('ui.measurespecification.stature'),
							'</td><td>{ctStature}</td>',
							'<td style="background:#eeeeee;">',
							message.get('message.edit.collar'),
							'</td><td>{ctCollarType}</td></tr>',
							'<tr><td style="background:#eeeeee;">',
							msMessage.get('ui.measurespecification.photo'),
							'</td><td colspan="3"><img height="200" src="../../_temp/{realPhoto1Name}">&nbsp;&nbsp;&nbsp;&nbsp;<img height="200" src="../../_temp/{realPhoto2Name}"></td></tr>',
						'</tbody></table>'
			];
            var itemTpl = new Ext.Template(itemTplMarkup);
            var sizeNameArray;

            var selectMsCallback = function(msId, name){
                document.getElementById('biMeasureSpecificationId').value = msId;
                document.getElementById('biMeasureSpecificationName').value = name;

                Ext.Ajax.request({
                    url: '../../servlet/ProductIdentificationServlet?action=17&id=' + id + '&msId=' + msId,
                    success: function(o){
                	   messageTip.msg(message.get('message.tip'), message.get('message.edit.successful'));
                       window.location = 'product_measure_specification_item_edit.html?id=' + id + '&msId=' + msId + '&startPage=' + startPage;
                    },
                    failure: function(o){
                    },
                    params: {
                        foo: 'bar'
                    }
                });
            }

            var renderMeasureSpec = function(){
				if(msId == ''){
					sizeNameArray = getMeasureSpecificationItemName('99');
					return;
				}
				xmlLoader = new xmlLoader('../../servlet/BiMeasureSpecificationServlet?action=11&id=' + msId);
				msRecord = msXMLReader.readRecords(xmlLoader.getXml()).records[0];
				sizeNameArray = getMeasureSpecificationItemName(msRecord.data.ctStatureCode);
				itemTpl.append('measureSpec', msRecord.data);
            }
			
			Ext.onReady(function(){
				
				renderMeasureSpec();
				
                Ext.QuickTips.init();
                
                // turn on validation errors beside the field globally
                Ext.form.Field.prototype.msgTarget = 'side';
				
				var msItemXMLReader = new Ext.data.XmlReader({
		                record: 'item'
		            }, [{
		                name: 'id',
		                mapping: 'id'
		            },{
						name: 'piId',
						mapping: 'piId'
						
					}, {
		                name: 'ctMsiDescription',
		                mapping: 'ctMsiDescription'
		            }, {
		                name: 'number',
		                mapping: 'number'
		            }, {
		                name: 'size1',
		                mapping: 'size1'
		            }, {
		                name: 'size2',
		                mapping: 'size2'
		            }, {
		                name: 'size3',
		                mapping: 'size3'
		            }, {
			            name: 'size4',
			            mapping: 'size4'
		            }, {
			            name: 'size5',
			            mapping: 'size5'
		            }, {
			            name: 'size6',
			            mapping: 'size6'
		            }, {
			            name: 'size7',
			            mapping: 'size7'
		            },{
			            name: 'size8',
			            mapping: 'size8'
		            }, {
		                name: 'tolerance',
		                mapping: 'tolerance'
	            }]);
			
				msItemForm = new Ext.FormPanel({
			        labelAlign: 'left',
					url: '../../servlet/ProductIdentificationServlet?action=13',
			        frame:true,
			        title: msMessage.get('ui.measurespecification.itemedittitle'),
			        bodyStyle:'padding:5px 5px 5px 5px;margin-top: 2px;',
			        width: '100%',
					labelWidth: 75,
					reader: msItemXMLReader,
					collapsible: true,
			        items: [{
	                        id: 'id',
	                        name: 'id',
	                        xtype: 'hidden'
                    	},{
	                        id: 'piId',
	                        name: 'piId',
	                        xtype: 'hidden',
							value: id
                    	},{
                        	id: 'biMeasureSpecificationId',
                        	name: 'biMeasureSpecificationId',
	                        xtype: 'hidden'
                    	},{
                            id: 'biMeasureSpecificationName',
                            name: 'biMeasureSpecificationName',
                            fieldLabel: piMessage.get('ui.productidentification.measurespecification'),
                            value: (msRecord == null)?'':msRecord.data.patronage,
                            xtype: 'textfield',
                            anchor: '86%',
                            allowBlank: false,
                            blankText: message.get('message.edit.noblank'),
                            emptyText: message.get('message.combo.pleaseselect'),
                            maxLength: 64,
							readOnly: true,
                            listeners: {
                                'render': {
                                    fn: function(){
                                        Ext.getCmp('biMeasureSpecificationName').getEl().on('click', function(){
                                            selectMs(selectMsCallback);
                                        }, this);
                                    },
                                    scope: this
                                }
                            }
                        },{
							layout: 'column',
							items: [{
								columnWidth:.5,
				                layout: 'form',
								items: [{
									xtype:'textfield',
				                    fieldLabel: msMessage.get('ui.measurespecification.itemnumber'),
				                    name: 'number',
				                    anchor:'86%',
									allowBlank: false,
                        			blankText: message.get('message.edit.noblank'),
									maxLength: 64,
									tabIndex: 1
								}]
							},{
								columnWidth:.5,
				                layout: 'form',
								items: [ctMsiDescriptionCombo]
							}]
                    	},{
				            layout:'column',
				            items:[{
				                columnWidth:.33,
				                layout: 'form',
				                items: [{
				                    xtype:'numberfield',
				                    fieldLabel: sizeNameArray[0],
				                    name: 'size1',
				                    anchor:'90%',
									tabIndex: 3
				                }, {
				                    xtype:'numberfield',
				                    fieldLabel: sizeNameArray[3] ,
				                    name: 'size4',
				                    anchor:'90%',
									tabIndex: 6
				                },{
				                    xtype:'numberfield',
				                    fieldLabel: sizeNameArray[6] ,
				                    name: 'size7',
				                    anchor:'90%',
									tabIndex: 9
				                }]
				            },{
				                columnWidth:.33,
				                layout: 'form',
				                items: [{
				                    xtype:'numberfield',
				                    fieldLabel: sizeNameArray[1],
									id: 'size2',
				                    name: 'size2',
				                    anchor:'90%',
									tabIndex: 3
				                },{
				                    xtype:'numberfield',
				                    fieldLabel: sizeNameArray[4],
									id: 'size5',
				                    name: 'size5',
				                    anchor:'90%',
									tabIndex: 6
				                },{
				                    xtype:'numberfield',
				                    fieldLabel: sizeNameArray[7],
									id: 'size8',
				                    name: 'size8',
				                    anchor:'90%',
									tabIndex: 8
				                }]
				            },{
				                columnWidth:.33,
				                layout: 'form',
				                items: [{
				                    xtype:'numberfield',
				                    fieldLabel: sizeNameArray[2],
									id: 'size3',
				                    name: 'size3',
				                    anchor:'90%',
									tabIndex: 4
				                },{
				                    xtype:'numberfield',
				                    fieldLabel: sizeNameArray[5],
									id: 'size6',
				                    name: 'size6',
				                    anchor:'90%',
									tabIndex: 7
				                },{
				                    xtype:'numberfield',
				                    fieldLabel: msMessage.get('ui.measurespecification.tolerance') + '(+/-)',
				                    name: 'tolerance',
				                    anchor:'90%',
									tabIndex: 13
				                }]
				            }]
			        }],
			
			        buttons: [{
			            text: message.get('message.edit.save'),
						handler: function(){
                            if (msItemForm.getForm().isValid()) {
                            	document.getElementsByName('ctMsiDescription')[0].value = ctMsiDescriptionCombo.getValue();
                                msItemForm.getForm().submit({
                                    method: 'post',
                                    success: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.successful'));
                                        msItemForm.getForm().reset();
										listStore.load();
                                    },
                                    failure: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.unsuccessful'));
                                    }
                                });
                            }
                        }
			        },{
						text: message.get('message.edit.reset'),
						handler: function(){
							msItemForm.getForm().reset();
						}
					},{
			            text: message.get('message.edit.cancel'),
                        handler: function(){
							if(input == 'history'){
								if (startPage != null) {
	                                window.location = 'product_identification_history_list.html?startPage=' + startPage;
	                            }else {
	                                window.location = 'product_identification_history_list.html';
	                            }
	                            return;
							}
                            if (startPage != null) {
                                window.location = 'product_identification_list.html?startPage=' + startPage;
                            }else {
                                window.location = 'product_identification_list.html';
                            }
                        }
			        }]
			    });
				
				//msItemForm.render('item');
				
				listStore = new Ext.data.Store({
                    url: '../../servlet/ProductIdentificationServlet?action=16&id=' + id,
                    
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'id',
                        totalRecords: 'itemTotal'
                    }, [ 
                    'index', 'number', 'ctMsiDescription', 'size1', 'isModified1', 'size2', 'isModified2', 'size3','isModified3', 'size4','isModified4', 'size5','isModified5', 'size6','isModified6', 'size7','isModified7', 'size8','isModified8','tolerance','id', 'id']),
                    
                    remoteSort: true
                }); 
				
				listGrid = new Ext.grid.GridPanel({
                    title: msMessage.get('ui.measurespecification.itemlisttitle'),
                    store: listStore,
					stripeRows: true,
                    height: 560,
                    columns: [{
                        header: message.get('message.list.id'),
                        dataIndex: 'index'
                    }, {
                        header: msMessage.get('ui.measurespecification.itemnumber'),
                        dataIndex: 'number'
                    }, {
                        header: msMessage.get('ui.measurespecification.itemdesignations'),
                        dataIndex: 'ctMsiDescription'
                    }, {
                        header: sizeNameArray[0],
                        dataIndex: 'size1',
                        renderer: function(value, p, record){
                        	if(record.data.isModified1 == '01'){
                        		return '<font color="red"><b>' + value + '</b></font>';
                        	}
                        	return value;
                        }
                    }, {
                        header: sizeNameArray[1],
                        dataIndex: 'size2',
                        renderer: function(value, p, record){
                        	if(record.data.isModified2 == '01'){
                        		return '<font color="red"><b>' + value + '</b></font>';
                        	}
                        	return value;
                        }
                    }, {
                        header: sizeNameArray[2],
                        dataIndex: 'size3',
                        renderer: function(value, p, record){
                        	if(record.data.isModified3 == '01'){
                        		return '<font color="red"><b>' + value + '</b></font>';
                        	}
                        	return value;
                        }
                    },{
                        header: sizeNameArray[3],
                        dataIndex: 'size4',
                        renderer: function(value, p, record){
                        	if(record.data.isModified4 == '01'){
                        		return '<font color="red"><b>' + value + '</b></font>';
                        	}
                        	return value;
                        }
                    },{
                        header: sizeNameArray[4],
                        dataIndex: 'size5',
                        renderer: function(value, p, record){
                        	if(record.data.isModified5 == '01'){
                        		return '<font color="red"><b>' + value + '</b></font>';
                        	}
                        	return value;
                        }
                    },{
                        header: sizeNameArray[5],
                        dataIndex: 'size6',
                        renderer: function(value, p, record){
                        	if(record.data.isModified6 == '01'){
                        		return '<font color="red"><b>' + value + '</b></font>';
                        	}
                        	return value;
                        }
                    },{
                        header: sizeNameArray[6],
                        dataIndex: 'size7',
                        renderer: function(value, p, record){
                        	if(record.data.isModified7 == '01'){
                        		return '<font color="red"><b>' + value + '</b></font>';
                        	}
                        	return value;
                        }
                    },{
                        header: sizeNameArray[7],
                        dataIndex: 'size8',
                        renderer: function(value, p, record){
                        	if(record.data.isModified8 == '01'){
                        		return '<font color="red"><b>' + value + '</b></font>';
                        	}
                        	return value;
                        }
                    },{
                        header: msMessage.get('ui.measurespecification.tolerance'),
                        dataIndex: 'tolerance',
						renderer: renderTolerance
                    }
                    /*,{
                        header: message.get('message.list.eidt'),
                        dataIndex: 'id',
                        renderer: renderEdit
                    },{
                        header: message.get('message.list.delete'),
                        dataIndex: 'id',
                        renderer: renderDelete
                    }*/],
                    viewConfig: {
                        forceFit: true
                    },
                    loadMask: true,
                    renderTo: 'itemList'
                });
				
				listStore.load();
				
				function renderTolerance(value, p, record){
					return String.format('(+/-){0}', value);
				}
				
				function renderEdit(value, p, record){
                    return String.format('<a href="javascript: editItem(editCallback, {0});"><img src="../../images/icons/pencil.png" title="' + message.get('message.list.eidt') + '" /></a>', record.id);
                }
                
                function renderDelete(value, p, record){
                    return String.format('<a href="javascript: deleteItem(deleteCallback, {0});"><img src="../../images/icons/delete.png" title="' + message.get('message.list.delete') + '"/></a>', record.id);
                }
				
				
			});
        
        </script>
    </head>
    <body>
       <div id="measureSpec">
				
		</div>
		<div id="item">
				
		</div>
		<div id="itemList">
			
		</div>
    </body>
</html>
